.home {
  & {
    padding: 10px 0;
  }
  :global {
    .tabs {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      column-gap: 10px;
      overflow-x: auto;
      img {
        width: 50px;
        margin-left: 10px;
      }
      .scroll-x {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 10px;

        background: linear-gradient(
          90deg,
          rgba(93, 185, 248, 0.2) 0%,
          rgba(150, 209, 249, 0) 100%
        );
        border-radius: 6px;
        padding-left: 6px;
        .scroll-item {
          white-space: nowrap;
          font-weight: 400;
          font-size: 12px;
          color: rgba(68, 68, 68, 0.9);
          &:last-of-type {
            margin-right: 10px;
          }
          &.active {
            font-weight: bold;
            font-size: 12px;
            color: #5db9f8;
          }
        }
      }
    }
    .ads-01 {
      border-radius: 10px;
      position: relative;
      img {
        width: 100%;
        border-radius: 10px;
      }
      .title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-weight: bold;
        font-size: 50px;
        color: #ffffff;
      }
      .mask {
        background-color: rgba(0, 0, 0, 0.5);
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .cover {
      position: relative;
      img {
        border-radius: 10px;
        width: 100%;
      }
      .info {
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 100%;
        background-color: rgba(105, 103, 103, 0.2);
        border-radius: 0 0 10px 10px;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #ffffff;
        padding: 0 10px;
        .flex-start {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          column-gap: 10px;
          .bg-img {
            width: 30px;
            height: 30px;
            border-radius: 50%;
          }
          .name {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: stretch;
            .title {
              font-weight: 400;
              font-size: 12px;
            }
            .position {
              font-weight: 400;
              font-size: 10px;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              column-gap: 4px;
              .img {
                width: 50px;
              }
            }
          }
        }
        .flex-end {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          column-gap: 4px;
          font-weight: 400;
          font-size: 12px;
        }
      }
    }
    .drag-up {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      img {
        width: 20px;
        height: 20px;
      }
      .flex {
        display: flex;
        align-items: center;
        justify-content: center;
        column-gap: 10px;
        .start {
          width: 100px;
          border-radius: 0px 0px 0px 0px;
          border: 2px solid;
          border-image: linear-gradient(
              270deg,
              rgba(200, 200, 200, 0),
              rgba(49, 164, 255, 1)
            )
            2 2;
        }
        .end {
          width: 100px;
          border-radius: 0px 0px 0px 0px;
          border: 2px solid;
          border-image: linear-gradient(
              270deg,
              rgba(49, 164, 255, 1),
              rgba(200, 200, 200, 0)
            )
            2 2;
        }
        .center {
          display: flex;
          flex-direction: column;
          align-items: center;

          font-weight: 400;
          color: #444444;
        }
      }
    }
    .news-style-01 {
      background-color: #ffffff;
      box-shadow: 0px 2px 4px 1px rgba(108, 108, 108, 0.19);
      border-radius: 10px;
      position: relative;
      .next-story {
        position: absolute;
        right: 0px;
        top: 400px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        column-gap: 4px;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 12px;
        padding: 0 10px;
        .txt {
          color: #ffffff;
          font-size: 12px;
        }
        img {
          width: 10px;
          height: 10px;
        }
      }
      .read-more {
        position: absolute;
        left: 50%;
        bottom: -12px;
        transform: translateX(-50%);
        width: 86px;
        height: 24px;
        background: linear-gradient(
          180deg,
          #aedeff 0%,
          rgba(210, 237, 255, 0) 100%
        );
        box-shadow: 0px 0px 4px 1px rgba(193, 193, 193, 0.19);
        border-radius: 12px;
        font-weight: 500;
        font-size: 11px;
        color: #3ea9fd;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .desc {
        padding: 10px 10px 20px;
        .title {
          font-weight: 600;
          font-size: 16px;
          color: #444444;
        }
        .content {
          font-weight: 400;
          font-size: 14px;
          color: #666666;
        }
      }
      .emote {
        & {
          padding: 0px 10px 20px;
        }
        .title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .start {
            font-weight: 400;
            color: #444444;
          }
          .end {
            font-weight: 400;
            font-size: 12px;
            color: #666666;
          }
        }
        .list {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          column-gap: 20px;
          .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            row-gap: 10px;
            width: 20%;
            img {
              width: 40px;
            }
            .name {
              display: flex;
              flex-direction: column;
              align-items: center;
              row-gap: 10px;
              .txt {
                color: #444444;
              }
              .rate {
                background-color: #48a0dc;
                color: #ffffff;
                font-size: 12px;
                padding: 0px 10px;
                height: 20px;
                line-height: 20px;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
              }
            }
          }
        }
      }
    }
    .news-style-02 {
      border-radius: 10px;
      background-color: #ffffff;
      box-shadow: 0px 2px 4px 1px rgba(108, 108, 108, 0.19);
      .padding {
        padding: 10px;
        .desc {
          padding: 10px 0px 0px;
          .title {
            font-weight: 600;
            font-size: 16px;
            color: #444444;
          }
          .content {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            a {
              font-weight: 500;
              font-size: 12px;
              color: rgba(62, 169, 253, 0.7);
              text-decoration: underline;
            }
          }
        }
      }
      .ads-03 {
        height: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);
        box-shadow: 0px 2px 4px 1px rgba(108, 108, 108, 0.19);
        border-radius: 0px 0px 10px 10px;
        font-weight: bold;
        font-size: 30px;
        color: #ffffff;
      }
    }
    .ads-02 {
      .item {
        height: 250px;
        background: rgba(0, 0, 0, 0.3);
        box-shadow: 0px 2px 4px 1px rgba(108, 108, 108, 0.19);
        border-radius: 10px;
        color: #ffffff;
        font-weight: bold;
        font-size: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
